<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>	
<div id="app">
	<div>
		<router-link :to='{params:{id:123}}'>User</router-link>

	</div>
	<div>
		<router-link to="/user/123">Ken</router-link>
	</div>
	<div>
		<router-view></router-view>
	</div>
</div>
<script>
	/**
	 * 在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特
	 * 定的url上使用，限制了其灵活性。使用props将组件和路由解耦
	 */
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
const vm = new Vue({
	el : '#app',
	router,
	data : {}
})
</script>	
</body>
</html>